<template>
  <div class="compression">
    <go-back></go-back>
    <main class="main-wrapper">
      <el-form ref="form" :model="form" label-width="auto">
        <el-form-item label="文件尺寸">
          <el-checkbox-group v-model="form.dimension">
            <el-checkbox
              :label="item.value"
              v-for="item in dimensionList"
              :key="item.value">
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="文件列表">
          <el-upload
            class="upload-picture"
            drag
            action="#"
            multiple
            ref="upload"
            accept=".jpg,.jpeg,.png"
            :auto-upload="false"
            :show-file-list="false"
            :file-list="form.fileList"
            :on-change="onChange"
            v-show="!form.fileList.length">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              <div>
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
              <div>最多上传10个JPG/JPEG/PNG文件，单个不超过20MB</div>
            </div>
          </el-upload>
          <ul class="file-list">
            <li
              class="file-item"
              v-for="item in form.fileList"
              :key="item.uid"
              :title="item.name">
              <!-- <div
                class="progress"
                :style="{
                  width: 32 + '%'
                }"></div> -->

              <el-row
                class="content"
                :gutter="20"
                type="flex"
                justify="space-between">
                <el-col :span="14" class="file-name">{{ item.name }}</el-col>
                <!-- <el-col :span="8">
                  {{ item.originFileSize
                  }}{{ item.fileSize ? ` -> ${item.fileSize}` : '' }}
                </el-col> -->
                <el-col :span="4">
                  <el-tag
                    :type="['info', 'primary', 'success'][item.handleStatus]"
                    effect="dark">
                    <i
                      class="el-icon-loading"
                      v-if="item.handleStatus === 1"></i>
                    {{ ['待处理', '处理中', '处理成功'][item.handleStatus] }}
                  </el-tag>
                </el-col>
                <el-col :span="1" v-if="item.handleStatus === 0">
                  <i class="el-icon-close" @click="delFile(item)"></i>
                </el-col>
                <el-col :span="1" v-if="item.handleStatus === 2">
                  <i class="el-icon-download" @click="downloadFile(item)"></i>
                </el-col>
              </el-row>
            </li>
          </ul>
        </el-form-item>
        <el-form-item>
          <div class="func">
            <template v-if="!timeConsuming">
              <el-upload
                action="#"
                multiple
                accept=".jpg,.jpeg,.png"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="onChange">
                <el-button type="primary" icon="el-icon-plus">
                  添加文件
                </el-button>
              </el-upload>
              <div>
                <el-button type="info" icon="el-icon-delete" @click="clearTask">
                  清空任务
                </el-button>
                <el-button type="primary" @click="startCompression">
                  开始处理
                  <i class="el-icon-right el-icon--right"></i>
                </el-button>
              </div>
            </template>
            <template v-else>
              <div>
                {{ form.fileList.length }}个任务处理完成，耗时{{
                  timeConsuming
                }}
              </div>
              <div>
                <el-button type="info" icon="el-icon-delete" @click="clearTask">
                  清空任务
                </el-button>
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  @click="packageDownload">
                  打包下载
                  <i class="el-icon-download"></i>
                </el-button>
              </div>
            </template>
          </div>
        </el-form-item>
      </el-form>
    </main>
  </div>
</template>
<script>
export default {
  name: 'pictureConvertIco',
  data() {
    return {
      form: {
        fileList: [],
        dimension: [48]
      },
      dimensionList: [
        { value: 16, label: '16x16' },
        { value: 32, label: '32x32' },
        { value: 48, label: '48x48' },
        { value: 64, label: '64x64' },
        { value: 128, label: '128x128' },
        { value: 256, label: '256x256' },
        { value: 512, label: '512x512' }
      ],
      timeConsuming: ''
    }
  },
  methods: {
    checkFileSuffix(name) {
      let suffix = name.substring(name.lastIndexOf('.') + 1, name.length)
      let suffixArr = ['jpg', 'jpeg', 'png']
      if (suffixArr.includes(suffix.toLowerCase())) {
        return true
      }
      return false
    },
    async onChange(file) {
      const IS_ACCORD_WITH = this.checkFileSuffix(file.name)
      if (!IS_ACCORD_WITH) {
        this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter(
          item => item.name !== file.name && item.uid !== file.uid
        )
        return this.msgWrg('请上传指定的图片格式')
      }

      // 图片大小不能超过20M
      if (file.size / 1024 / 1024 > 20) {
        this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter(
          item => item.name !== file.name && item.uid !== file.uid
        )
        return this.msgWrg('图片大小不能超过20M')
      }

      // // 1MB
      // const FILE_SIZE = file.size / 1024 / 1024

      // // MB
      // if (FILE_SIZE < 1) {
      //   file['originFileSize'] = `${FILE_SIZE.toFixed(2)}mb`
      // }

      // // KB
      // if (FILE_SIZE > 0) {
      //   file['originFileSize'] = `${(FILE_SIZE * 1024).toFixed(2)}kb`
      // }

      file['handleStatus'] = 0
      file['iconList'] = []
      file.iconName = `${file.name.split('.')[0]}.ico`

      this.form.fileList.push(file)
    },
    delFile(item) {
      this.form.fileList = this.form.fileList.filter(
        file => file.uid !== item.uid && item.name !== file.name
      )
      if (!this.form.fileList.length) {
        this.clearTask()
      }
    },
    downloadFile(row) {
      const iconFile = this.form.fileList.find(
        item => item.name === row.name
      ).iconList
      this.$utils.downloadZip(iconFile)
    },
    async startCompression() {
      if (this.form.fileList.length < 1) {
        return this.msgErr('请上传图片！')
      }

      let handleCount = 0
      const firstTime = +new Date()

      for (let k = 0; k < this.form.fileList.length; k++) {
        const file = this.form.fileList[k]
        // 处理状态
        this.$set(this.form.fileList[k], 'handleStatus', 1)
        this.$forceUpdate()
        let iconFile = null

        for (let i = 0; i < this.form.dimension.length; i++) {
          const size = this.form.dimension[i]
          iconFile = await this.$utils.imgToIcon(file.raw, { size })
          if (file.name === this.form.fileList[k].name) {
            this.$set(this.form.fileList[k]['iconList'], i, {
              size,
              name: `${file.iconName.split('.')[0]}-${size}×${size}.ico`,
              base64: iconFile
            })
          }
          handleCount++
        }
        // 处理状态
        this.$set(this.form.fileList[k], 'handleStatus', 2)
        this.$forceUpdate()
        if (
          handleCount >=
          this.form.dimension.length * this.form.fileList.length
        ) {
          const lastTime = +new Date()
          this.timeConsuming = `${(lastTime - firstTime) / 1000}秒`
        }
      }
    },
    clearTask() {
      this.$refs.upload.clearFiles()
      this.form.fileList = []
      this.timeConsuming = ''
    },
    packageDownload() {
      const iconFile = this.form.fileList.map(item => item.iconList).flat()
      this.$utils.downloadZip(iconFile)
    }
  }
}
</script>
<style lang="scss" scoped>
.compression {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 30px;
  color: var(--text-color);
  /deep/.el-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 700px;
    .el-form-item__label,
    .el-checkbox-group,
    .el-checkbox,
    .el-upload__tip {
      color: inherit;
    }
    .el-slider__marks-text {
      white-space: nowrap;
    }
    .el-slider {
      width: 100%;
      padding: 0 15px;
    }
    .upload-picture {
      .el-upload-dragger,
      .el-upload {
        width: 100%;
      }
    }
    .file-list {
      border-radius: 8px;
      overflow: hidden auto;
      width: 100%;
      max-height: 300px;
      background: rgba(0, 0, 0, 0.2);
      .file-item + .file-item {
        border-top: 1px solid rgba(255, 255, 255, 0.5);
      }
      .file-item {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        .progress {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 1;
          background: rgba(48, 199, 254, 0.6);
        }
        .content {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 2;
          padding: 5px;
          align-items: center;
          margin: 0 !important;
          .el-col + .el-col {
            display: flex;
            justify-content: center;
          }
          .file-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
          }
          .specification {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 20px;
          }
          [class^='el-icon'] {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
        }
      }
    }
    .func {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
